<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <!-- <el-form inline  ref="searchForm">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="searchForm.real_name"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form> -->
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrAdd = true"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="login_name" label="账号" />
        <el-table-column prop="admin" label="是否接受消息推送">
          <template slot-scope="{ row }">
            <div class="green" v-if="row.admin">是</div>
            <div v-else class="red">否</div>
          </template>
        </el-table-column>
        <el-table-column prop="avatar_url" label="管理员头像">
          <template slot-scope="{ row }">
            <el-image
              style="width: 80px; height: auto"
              :src="row.avatar_url"
              :preview-src-list="[row.avatar_url]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="账户名称" />
        <el-table-column prop="real_name" label="实名信息" />
        <el-table-column prop="phone" label="管理员手机号" />

        <el-table-column label="操作" width="300px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="openEdit(row.id)"
              >编辑信息</el-button
            >
            <el-button type="text" @click="setRole(row.id)"
              >配置角色</el-button
            >
            <!-- <el-button type="text" @click="resetPassword(row.id)"
              >重置密码</el-button
            > -->
            <el-button type="text" class="red" @click="deleteAdmin(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="新增管理员"
      :visible.sync="showAddOrAdd"
      width="1400px"
      @closed="resetForm()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="10em"
      >
        <el-form-item class="span-3" label="登录账号" prop="login_name">
          <el-input
            v-model="builingForm.login_name"
            placeholder="登录账号"
          ></el-input>
        </el-form-item>


        <el-form-item class="span-3" label="密码" prop="password1">
          <el-input
            v-model="builingForm.password1"
            placeholder="登录账号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-3" label="密码（再次输入）" prop="password2">
          <el-input
            v-model="builingForm.password2"
            placeholder="登录账号"
          ></el-input>
        </el-form-item>

        <el-form-item  label="头像" prop="avatar_url">
          <Upload
            v-model="builingForm.avatar_url"
            :file.sync="builingForm.avatar_url"
          />
        </el-form-item>

        <el-divider></el-divider>
        <el-form-item prop="$id" hidden />
        <el-form-item class="span-2" label="实名信息" prop="real_name">
          <el-input
            v-model="builingForm.real_name"
            placeholder="实名信息"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="手机号" prop="phone">
          <el-input
            v-model="builingForm.phone"
            placeholder="手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="邮箱" prop="email">
          <el-input
            v-model="builingForm.email"
            placeholder="邮箱"
          ></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="builingForm.description"
            type="textarea"
            row="6"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer >
        <el-button type="primary" @click="editAdminInfo(builingForm.$id)"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="配置管理员权限"
      :visible.sync="showAdminRole"
      width="1400px"
      @closed="resetForm()"
    >
      <el-form
        :model="RoleForm"
        ref="RoleForm"
        label-width="10em"
      >
        <el-form-item label="所有角色">
          <el-checkbox-group v-model="RoleForm.checkList">
            <el-checkbox v-for="(item,index) in roleList" v-bind:key="index" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer >
        <el-button type="primary" @click="sureRole()"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit, status } from "@/utils/mixins";
import {getStorage} from "@/utils/service/auth";
import Upload from "@/components/Upload/SingleImage.vue";
export default {
  mixins: [table, addOrEdit, status],
  components: {
    Upload,
  },
  data: () => ({
    isLoading: true,
    showAddOrAdd:false,//查看详情弹窗
    showAdminRole:false,//管理员权限配置
    fullscreenLoading: false,//全局loading
    isAdmin:false,
    tableData:[],
    tableTotal: 0,

    searchForm:{
      page:1,
      per_page:10
    },
    builingForm:{
      $id:"",
      login_name:"",
      password1:"",
      password2:"",
      avatar_url:"",
      real_name:"",
      phone:'',
      email:'',
      description:''
    },
    roleList:[],
    RoleForm:{
      checkList:[]
    },

  }),
  
  created() {
    this.isAdmin=getStorage("userInfo").wx_openid_id==1?true:false
    this.getRoleList()
    this.getList()
  },
  methods: {
    // 获取角色列表
    getRoleList(){
      API.getRoleList()
        .then(({data}) => {
          let roleList=data.map(role =>{
            return {name:role.name,id:role.id}
          })
          this.roleList=roleList
        })
        .catch((err)=>{})
        .finally(() =>{})
    },

    // 获取列表
    getList(){
      API.getAdminList(this.searchForm)
      .then(({data}) => {
        this.tableData=data.items
        this.tableTotal=data.total
      }).catch();
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 打开编辑管理员弹窗
    openEdit(id){
      if(this.isAdmin){
        API.getAdminDetail(id)
        .then(({data}) => {
          this.builingForm.$id=data.id,
          this.builingForm.login_name=data.login_name,
          this.builingForm.password1=data.password1,
          this.builingForm.password2=data.password2,
          this.builingForm.avatar_url=data.avatar_url,
          this.builingForm.real_name=data.real_name,
          this.builingForm.phone=data.phone,
          this.builingForm.email=data.email,
          this.builingForm.description=data.description
        }).catch().finally(()=>{
          this.showAddOrAdd=true
        });
      }else{
        this.$message.error("该账号暂无该权限！");
      }

   

    },

    // 删除管理员
    deleteAdmin(id){
      let _that=this
      if(_that.isAdmin){
        this.$confirm(`是否删除该管理员？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delAdmin(id)
        .then(({data}) => {
          _that.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
      }else{
        _that.$message.error("该账号暂无该权限！");
      }

      
   

    },

    // 打开配置角色弹窗
    setRole(id){
      if(this.isAdmin){
        this.builingForm.$id=id
        API.getAdminRole(id)
          .then(({data})=>{
            if(data){
              this.RoleForm.checkList=data
            }else{
              this.RoleForm.checkList=[]
            }
          })
        .catch(() => {})
        .finally(() =>{
          this.showAdminRole=true
        })
      }else{
        this.$message.error("该账号暂无该权限！");
      }
      
    },

    // 确认权限
    sureRole(){
      let _that=this
      let id=this.builingForm.$id
      API.setRole(id,{roles:this.RoleForm.checkList})
        .then(({data})=>{
          this.$message.success("配置成功！");
        })
        .catch(() => {})
        .finally(() =>{
          _that.resetForm()
          _that.getList()
          this.showAdminRole=false
        })

    },

    resetForm(){
      this.builingForm.login_name=''
      this.builingForm.password1=''
      this.builingForm.password2=''
      this.builingForm.avatar_url=''
      this.builingForm.real_name=''
      this.builingForm.phone=''
      this.builingForm.login_name=''
      this.builingForm.email=''
      this.builingForm.description=''
      // this.RoleForm.checkList=[]
    },

    // 重置密码
    resetPassword(){

    },

    // 确定按钮 编辑用户信息
    editAdminInfo(id){
      let _that=this
      let data={
        login_name:this.builingForm.login_name,
        avatar_url:this.builingForm.avatar_url,
        real_name:this.builingForm.real_name,
        nick_name:this.builingForm.real_name,
        phone:this.builingForm.phone,
        email:this.builingForm.email,
        description:this.builingForm.description,
        password1:this.builingForm.password1,
        password2:this.builingForm.password2
      }
      if(this.builingForm.$id){
        API.editAdmin(id,data).then(({data})=>{
          this.$message.success("新增成功！");
        }).catch((err)=>{
          this.$message.error("新增失败！");
        }).finally(()=>{
          this.showAddOrAdd=false
          _that.getList()
        })
      }else{
        API.addAdmin(data).then(({data})=>{
          this.$message.success("编辑成功！");
        }).catch((err)=>{
          this.$message.error("编辑失败！");
        }).finally(()=>{
          this.showAddOrAdd=false
          _that.getList()
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  .green{
    color:#409EFF;
  }
  ::v-deep{
    .el-dialog{
      margin-top:8vh !important;
    }
    .el-checkbox{
      display:inline-flex !important;
      align-items:center !important;
    }
    .el-checkbox__label{
      font-size:18px !important;
    }
  }
</style>